<template>
  <div class="product-management-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
        placeholder="搜索商品名称/sku"
        v-model="productName"
        prefix-icon="el-icon-search"
        @keyup.enter.native="merchantSearch"
      ></el-input>
    </div>

    <!-- 商品列表 -->
    <div class="product-grid">
      <el-card
        v-for="product in tableData"
        :key="product.id"
        class="product-card"
        shadow="hover"
      >
        <!-- 图片预览 -->
        <div class="image-preview">
          <el-image
            :src="product.mainImageUrl"
            :preview-src-list="product.thumbnail.split(',')"
            style="height: 80px; object-fit: contain"
          ></el-image>
        </div>

        <!-- 商品信息 -->
        <div class="card-content" @click="viewDetails(product)">
          <!-- 商品名称截断 -->
          <h3 class="product-name">
            {{ product.productName }}
          </h3>
          <div class="product-meta">
            <!-- 元信息截断 -->
            <span>SKU: {{ product.skuCode }}</span><br>
            <span>分类: {{ product.categoryName }}</span>
          </div>
          <div class="price-info">
            <span class="current-price">￥{{ product.price }}</span>
          </div>
          <!-- 标签云 -->
          <div class="tags-container">
        <span class="tag" v-for="tag in product.tags.split(',')" :key="tag">
          {{ tag }}
        </span>
          </div>
          <div class="stock-status">
            <el-tag
              :type="product.stockQuantity > 50 ? 'success' : 'warning'"
              style="font-size: 0.85em"
            >
              库存: {{ product.stockQuantity }}
            </el-tag>
          </div>
          <div class="action-buttons">

            <!--            <el-button size="mini" type="warning" @click="editProduct(product)">-->
            <!--              编辑-->
            <!--            </el-button>-->
          </div>
        </div>
      </el-card>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-dialog
      title="商品详情"
      :visible.sync="dialogVisible2"
      width="60%"
      :modal="false"
      class="dialog-style"
    >
      <Info
        :id="productsId"
        @handleDialogClose="handleDialogClose"
      />
    </el-dialog>
  </div>
</template>

<script>
import {getProductsList} from "@/api/list/products";
import Info from "@/views/list/products/info.vue";

export default {
  name: "products",
  components: {Info},
  props: {
    id: {
      type: Number,
      required: false // 必填项
    },
    userId: {
      type: Number,
      required: false // 必填项
    }
  },
  data() {
    return {
      tableData: [],
      productName: "",
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      productsId: null,
      // 新增：用于控制加载状态（原代码中存在this.loading但未定义）
      loading: false,
      dialogVisible2: false,
    };
  },
  watch: {
    id(newVal) {
      if (newVal) this.merchantSearch();
    }
  },
  mounted() {
    this.merchantSearch()
  },
  methods: {
    merchantSearch() {
      this.loading = true; // 新增：初始化加载状态
      console.log(this.productName);
      getProductsList(this.id, this.productName, this.userId, this.queryParams)
        .then((response) => {
          this.tableData = response.rows
          this.total = response.total
        })
        .catch((error) => {
          this.$message.error("获取列表失败");
        })
        .finally(() => {
          this.loading = false; // 修复：使用定义的loading变量
        });
      this.productName = ""
    },
    viewDetails(product) {
      this.productsId = product.id;
      this.dialogVisible2 = true;
    },
    handleDialogClose() {
      this.dialogVisible2 = false
      this.merchantSearch();
    },

    editProduct(product) {
      this.$message.info(`编辑商品: ${product.productName}`)
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.merchantSearch()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.merchantSearch()
    }
  }
}
</script>

<style scoped lang="scss">
/* 关键样式修改：修复网格布局 */
.product-grid {
  /* 核心修复：调整网格列配置，允许每行显示多个卡片 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* 匹配卡片合理宽度 */
  gap: 20px; /* 保持适当间距 */
}

/* 原有的文本截断样式保留 */
.product-name,
.product-meta span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

.product-name {
  font-size: 1em;
  margin-bottom: 8px;
  max-height: 1.2em;
}

.product-meta span {
  font-size: 0.85em;
  display: block;
  max-height: 1.6em;
}

/* 其他优化样式 */
.product-management-container {
  padding: 15px;
}

.search-bar {
  margin-bottom: 20px;
  max-width: 600px;
  margin: 0 auto 30px; /* 居中显示搜索栏 */
}

.product-card {
  border-radius: 8px;
  transition: transform 0.2s ease;
  height: auto; /* 允许内容自动撑开 */

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* 增强悬停效果 */
  }
}

.image-preview {
  padding: 12px;
  text-align: center;
  background-color: white;
}

.card-content {
  padding: 10px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px; /* 统一卡片最小高度 */
}

.price-info {
  font-size: 1.1em;
  color: #4a90e2;
  margin-bottom: 10px;
}

.stock-status {
  margin: 10px 0;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* 移动端缩小列宽 */
    gap: 15px;
  }

  .card-content {
    min-height: auto;
  }
}

.tags-container {
  margin: 2px 0;
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  background-color: #f0f2f5;
  border-radius: 18px;
  margin-right: 2px;
  margin-bottom: 8px;
  font-size: 10px;
}

.dialog-style {
  .el-dialog {
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    }
  }
}

</style>
